<!DOCTYPE html>
<html>    
    <body>
        <div class="task-list fill">
            <h3>Tasks</h3>
            <div data-bind="template: {name: 'task-listitem-template', foreach: tasks}"></div>
        </div>

        <div class="task-details fill" data-bind="with: $root.selectedTask">
            <div data-bind="sortable: {template: 'thumbail-template', data: frames, afterMove: $root.reorderFrame}"></div>
        </div>

        <script type="text/html" id="task-listitem-template">
            <div class="task-listitem" data-bind="applyClassBind: {property: ko.observable(function() {return ($parent.selectedTask() === $data); })(), classes: ['selected-task']}, event: {click: $root.selectedTask}">
                <h4 data-bind="text: name"></h4>
                <h5 data-bind="text: description"></h5>
            </div>
        </script>
    </body>    
</html>